<div data-role="content" data-theme="a">	
	<div data-theme="a">
		<button data-bind="event: {vclick: Tap_NewGame}">New Game</button>
	</div>
	<div data-theme="a">
		<button data-bind="event: {vclick: Tap_Options}">Options</button>
	</div>
	<div data-theme="a">
		<button>Exit</button>
	</div>
	<!-- Everything below this line is for temporary mocking / debugging purposes -->
	<div data-role="collapsible" data-iconpos="right" data-content-theme="a">
		<h3>Current Game Debug:</h3>
		<span data-bind="with: current_game">
			<p>Image: <span data-bind="text: image"></span></p>
			<p>Captions: </p>
			<span data-bind="foreach: captions">
				#<span data-bind="text: $index"></span>:
				<span data-bind="text: user_name"></span> -
				<span data-bind="text: caption"></span>
				<br>
			</span>
			<p>Winner: <span data-bind="text: winner"></span></p>
		</span>
		<button data-bind="event: {vclick: Tap_Continue}">Continue</button>
	</div>
	
	<div class="gamesInProgress">
		<label><b>Games In Progress</b></label>
	</div>	
			
	<div class="gamesInProgress" data-bind="foreach: all_games">
		<div class="gameInfo">
			<div class="ui-grid-b">
				<div class="ui-block-a">
					<div id="gameTextContainer">
						<p id="gameText" >Game <span data-bind="text: game_number"></span></p>
					</div>					
				</div>
				<div class="ui-block-b">
					<img id="imageContainer" data-bind="attr:{src: image}"/>
				</div>
				<div class="ui-block-c">
					<div id="playButtonContainer">
						<input data-theme="b" id="playButton" type="button" 
							data-inline="true" value="Play" data-icon="arrow-r" data-iconpos="right" data-bind="event: {vclick: Play}"></input>
					</div>			
				</div>				
			</div>
		</div>									
	</div>
</div>